= form_for(@machine_grid, url: url, html: { class: 'form-horizontal' }) do |f|
  = render partial: 'shared/cpanel/error_messages', locals: { object: @machine_grid }
  = f.hidden_field :machine_id
  = f.hidden_field :grid_id
  = f.hidden_field :product_id
  .form-group
    .control-label.col-md-2.no-padding-right
      = button_tag('选择终端', type: 'button', id: 'select_machines', class: 'btn btn-outline btn-primary')
    .col-md-8#select_machines_detail
      %dl
        %dt 终端编码
        %dd#machine_code= @machine_grid.try(:machine).try(:code)
        %dt 终端名称
        %dd#machine_name= @machine_grid.try(:machine).try(:name)

  .form-group
    .control-label.col-md-2.no-padding-right
      = button_tag('选择格子', type: 'button', id: 'select_grids', class: 'btn btn-outline btn-primary')
    .col-md-8#select_grids_detail
      %dl
        %dt 格子编码
        %dd#grid_code= @machine_grid.try(:grid).try(:code)
        %dt 格子名称
        %dd#grid_name= @machine_grid.try(:grid).try(:name)

  .form-group
    .control-label.col-md-2.no-padding-right
      = button_tag('选择商品', type: 'button', id: 'select_products', class: 'btn btn-outline btn-primary')
    .col-md-8#select_products_detail
      %dl
        %dt 商品名称
        %dd#product_name= @machine_grid.try(:product).try(:name)
        %dt 商品价格
        %dd#product_price= @machine_grid.try(:product).try(:price)
        %dd#product_image
          = image_tag(@machine_grid.try(:product).try(:image_url), class: 'img-thumbnail', style: 'height: 80px; width: 80px')

  .form-group
    .col-md-offset-2
      = f.submit '提交', class: 'btn btn-primary btn-outline', data: { disable_with: '请稍候...' }

= render partial: 'shared/cpanel/products_modal'
= render partial: 'shared/cpanel/machines_modal'
= render partial: 'shared/cpanel/grids_modal'

:javascript
  $(function(){
    new CPANEL.ProductsModal({
      modal_id: "select_products",
      modal_confirm_callback: function(data){
        $("#machine_grid_product_id").val(data.id);
        $("#select_products_detail #product_name").html(data.name);
        $("#select_products_detail #product_price").html(data.price);
        $("#select_products_detail #product_image").html(data.image_url);
      }
    });

    new CPANEL.MachinesModal({
      modal_id: "select_machines",
      modal_confirm_callback: function(data){
        $("#machine_grid_machine_id").val(data.id);
        $("#select_machines_detail #machine_code").html(data.code);
        $("#select_machines_detail #machine_name").html(data.name);
      }
    });

    new CPANEL.GridsModal({
      modal_id: "select_grids",
      modal_confirm_callback: function(data){
        $("#machine_grid_grid_id").val(data.id);
        $("#select_grids_detail #grid_code").html(data.code);
        $("#select_grids_detail #grid_name").html(data.name);
      }
    });
  });

